<template>
	<view class="store-container">
		<view class="search-box">
			<view class="search-input bgFff flex-jus"
				@tap="nologinJump(`/subpage/storemanage/search?latitude=${queryParams.latitude}&longitude=${queryParams.longitude}`)">
				<u-search placeholder="查找周边生活服务" disabled clearabled bgColor="#fff" :showAction="false"></u-search>
				<view class="search-btn">搜索</view>
			</view>
		</view>
		<view class="convenient-app">
			<view class="app-title">
				便捷应用
			</view>
			<view class="app-list">
				<view class="app-item" v-for="item in appList" :key="item" @tap="itemClick(item)">
					<image :src="'../../static/images/index/'+ item.icon +'.png'" mode=""
						style="width: 64rpx;height: 64rpx;margin-bottom: 16rpx;"></image>
					<view class="app-name">{{ item.name }}</view>
				</view>

			</view>
		</view>

		<view class="store-content">
			<view class="store-head">
				<view class="store-title">
					周边服务
				</view>
				<view :class="['filter-box', { 'moreText': typeIndex > 0 }]">
					<picker class="filter-box-wrap" :value="typeIndex" :range="listTypeLabels"
						@change="bindPickerChange">
						<text class="filter-text">{{ listTypeLabels[typeIndex] }}</text>
						<text class="filter-icon"></text>
					</picker>
				</view>
			</view>
			<view class="store-list-wrap">
				<x-skeleton type="list" :loading="loading">
					<view class="store-list" v-if="listData.length">
						<view class="store-item" v-for="store in listData" :key="store.id">
							<view class="store-logo">
								<image class="store-logo-img" :src="api_host + store.storeIcon" mode=""></image>
							</view>
							<view class="store-info">
								<view class="store-name s_1">{{ store.title }}</view>
								<view class="store-desc s_1">{{ store.storeBlurb }}</view>
								<view class="store-addr">
									<view class="store-distance">
										<view class="distance">
											距你直线{{ store.distance || 0 }}km
										</view>
										<view class="address s_1">{{ store.storeAddr }}</view>
									</view>
									<view class="store-operate">
										<image class="operation-img tel" @tap="handleCall(store)"
											src="https://hxs.dsjhs.com:553/prod-api/profile/dianhua.png" mode="">
										</image>
										<image class="operation-img nav" @tap="callouttap(store)"
											src="https://hxs.dsjhs.com:553/prod-api/profile/ditudaohang.png" mode="">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="no-data">
						<text>暂无数据</text>
					</view>
				</x-skeleton>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from './mixin.js'
	import {
		storeTypeList
	} from '@/common/api_store.js'
	const appList = [{
			name: '挪车',
			icon: 'icon1',
			type: 'page',
			path: '/subpage/car/index',
		},
		{
			name: '停车',
			icon: 'icon5',
			type: 'h5',
			path: 'https://www.dsjhs.com/gd_front'
		},
		{
			name: '出租房屋',
			icon: 'icon11',
			type: 'miniProgram',
			appId: 'wxb8bf979bfbfa8861',
		},
		// {
		// 	name: '随手拍',
		// 	icon: 'icon12',
		// 	type: 'h5',
		// 	path: 'http://mlp.gaj.huangshi.gov.cn/subPages/ssp/index'
		// },
		{
			name: '警情上报',
			icon: 'icon13',
			type: 'miniProgram',
			appId: 'wx6485f99bb129614c',
			path: 'pages/jqsb/jqsb'
		},
		{
			name: '附近加油站',
			icon: 'icon14',
			type: 'page',
			path: '/subpage/gasstation/index',
		}
	]

	export default {
		mixins: [mixin],
		created() {
			// 检查是否已授权地理位置权限
			this.reset()
			const _this = this
			uni.getSetting({
				success(res) {
					console.log(res, 'getSetting')
					if (!res.authSetting['scope.userLocation']) {
						// 未授权，需要进行授权
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								// 用户已同意授权地理位置信息
								console.log('地理位置授权成功');
								// 可以在这里调用获取地理位置的API
								_this.getLocationInfo()
							},
							fail() {
								// 用户拒绝授权地理位置信息
								uni.showModal({
									title: '提示',
									content: '此功能需要获取您的地理位置信息，请确认授权',
									success: function(modalRes) {
										if (modalRes.confirm) {
											// 引导用户去设置中开启权限
											uni.openSetting();
										} else if (modalRes.cancel) {
											_this.rejectGetLocation()
										}
									}
								});
							}
						});
					} else if (res.authSetting['scope.userLocation']) {
						// 已授权，可以直接调用获取地理位置的API
						_this.getLocationInfo()
					}
				}
			});
		},
		data() {
			return {
				appList,
				listTypes: [],
				listTypeLabels: [],
				typeIndex: 0,
			}
		},
		
		onLoad() {
			this.getTypes()
		},
		methods: {
			bindPickerChange(e) {
				this.loading = true
				console.log(e, 'bindPickerChange')
				this.typeIndex = e.detail.value
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 999
				this.listData = []
				this.queryParams.storeType = this.listTypes[this.typeIndex].id
				this.getList()
			},

			// 商铺类型
			async getTypes() {
				const res = await storeTypeList()
				if (res.code === 200) {
					res.data.unshift({
						title: '全部分类',
						id: ''
					})
					this.listTypes = res.data
					this.listTypeLabels = res.data.map(item => item.title)
				}
			},

			itemClick(item) {
				if (item.type === 'miniProgram') {
					uni.navigateToMiniProgram({
						appId: item.appId,
						path: item.path || ''
					})
				} else if (item.type === 'h5') {
					let link = decodeURIComponent(item.path)
					uni.navigateTo({
						url: '/pages/webview/index?link=' + link
					})
				} else {
					uni.navigateTo({
						url: item.path || '/pages/index/index'
					})
				}
			},
			
			reset() {
				this.listData = []
				this.loading = true
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 5
			},

			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				console.log('进入getLocationInfo方法')
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						console.log(res, 456789)
						that.queryParams.longitude = res.longitude; //118.787575;
						that.queryParams.latitude = res.latitude; //32.05024;
						that.getList()
					},
					fail: function(err) {
						console.log(err, 999999)
						// let system = uni.getSystemInfoSync();
						// console.log(system.locationEnabled, '手机gps定位服务')
						// 用户拒绝授权或未开启定位
						uni.showModal({
							title: '提示',
							content: '此功能需要获取您的位置信息，请开启手机定位服务,再重新进此页面',
							success: function(modalRes) {
								if (modalRes.confirm) {
									// 引导用户去设置中开启定位服务

								} else {
									that.rejectGetLocation()
								}
							}
						});
					}
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "您拒绝了授权，无法为您提供距离显示服务",
					icon: "none",
					duration: 2000,
				});
				// this.getGoodsBytype(this.pType, this.goodType, this.sortWay, this.type, this.longitude, this.latitude, this
				// 	.distance, this.area)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-container {
		width: 100%;
		padding: 32rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #FEF4E8;

		.search-box {
			width: 100%;
			height: 80rpx;
			margin-bottom: 40rpx;
			box-sizing: border-box;

			.search-input {
				height: 80rpx;
				border-radius: 40rpx;
			}

			.search-btn {
				width: 160rpx;
				height: 80rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #34314F;
				line-height: 80rpx;
				text-align: center;
				background: #FFDE6D;
				border-radius: 40rpx;
				backdrop-filter: blur(25px);
			}
		}

		.convenient-app {
			width: 100%;
			margin-bottom: 50rpx;
			padding: 22rpx 32rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;

			.app-title {
				position: relative;
				margin-bottom: 24rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #34314F;
				line-height: 50rpx;
				text-align: left;

				&:before {
					position: absolute;
					content: '';
					left: -32rpx;
					top: 50%;
					width: 3px;
					height: 12px;
					transform: translateY(-50%);
					background: #FFDE6D;
				}
			}

			.app-list {
				display: flex;
				// justify-content: space-between;

				.app-item {
					display: flex;
					margin-right: 54rpx;
					flex-direction: column;
					align-items: center;

					.app-name {
						font-weight: 600;
						font-size: 22rpx;
						color: #34314F;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
					}
				}

			}
		}

		.store-content {
			.store-head {
				display: flex;
				justify-content: space-between;

				.store-title {
					font-weight: 600;
					font-size: 18px;
					color: #34314F;
					line-height: 25px;
					text-align: left;
				}

				// .cate-box {
				// 	width: 200rpx;
				// 	height: 64rpx;
				// 	background: url();
				// }
				.filter-box {
					position: relative;
					display: flex;
					width: 200rpx;
					height: 64rpx;
					align-items: center;
					justify-content: center;
					text-align: center;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/zbfwflbg.png') no-repeat center;
					background-size: 100% 100%;

					&.moreText {
						text-align: left;
					}

					.filter-box-wrap {
						// min-width: 144rpx;
						// background: #FFFFFF;
						// border-radius: 40rpx;
						// padding: 14rpx 16rpx;
						width: 200rpx;
						height: 64rpx;
					}

					.filter-text {
						position: absolute;
						top: 18rpx;
						left: 28rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #34314F;
						line-height: 28rpx;
					}

					.filter-icon {
						position: absolute;
						top: 50%;
						right: 10rpx;
						transform: translateY(-50%);
						margin-left: 4rpx;
						width: 52rpx;
						height: 52rpx;
						box-sizing: border-box;
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/zhankaianniu.png') no-repeat center;
						background-size: 100% 100%;
					}

				}
			}

			.store-list {
				margin-top: 24rpx;

				.store-item {
					display: flex;
					width: 100%;
					padding: 20rpx;
					margin-bottom: 24rpx;
					background: #FFFFFF;
					border-radius: 20px;
					box-sizing: border-box;

					.store-logo {
						flex: 0 0 96px;
						height: 96px;
						border-radius: 24rpx;
						overflow: hidden;

						.store-logo-img {
							width: 96px;
							height: 96px;
						}
					}

					.store-info {
						position: relative;
						flex: auto;
						margin-left: 20rpx;
						padding-top: 4rpx;

						.store-name {
							margin-bottom: 4rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #34314F;
							line-height: 22px;
							text-align: left;
						}

						.store-desc {
							max-width: 430rpx;
							padding-bottom: 8rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #34314F;
							line-height: 36rpx;
							text-align: left;

						}

						.store-addr {
							// position: absolute;
							// bottom: -8rpx;
							// right: 0;
							width: 100%;
							display: flex;
							justify-content: space-between;
							padding-top: 16rpx;
							border-top: 1px solid rgba(52, 49, 79, 0.08);

							.distance {
								margin-top: 6rpx;
								margin-bottom: 6rpx;
								font-weight: 600;
								font-size: 26rpx;
								color: #FF7F1C;
								line-height: 18px;
								text-align: left;
								font-style: normal;
							}

							.address {
								max-width: 246rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #34314F;
								line-height: 16px;
								text-align: left;
								font-style: normal;
							}

							.store-operate {
								display: flex;

								.operation-img {
									display: block;
									width: 84rpx;
									height: 84rpx;

									&.tel {
										margin-right: 20rpx;
									}
								}

							}
						}
					}
				}
			}
			
		}
	}

	//单行
	.s_1 {
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏超出的内容 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的部分 */
		max-width: 200px;
		/* 设置最大宽度以限制文本的显示长度 */
	}


	//多行

	.s_2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>